import React from 'react';
import { Avatar, Checkbox, Button, Tools } from 'weaver-mobile';
import { userType } from '../../../components/form/permission/type';
import { Else, If, Then } from '../../if';
import classNames from 'classnames';

const { USER, CHATGROUP, SUBCOMPANY, DEPARTMENT } = userType;
const CheckboxItem = Checkbox.CheckboxItem;
const getLabel = Tools.getLabel;

export default class Footer extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  onSubmit = () => {
    const { onSubmit, count } = this.props;
    if (window.em && count > 0) {
      this.setState({ loading: true });
    }

    onSubmit();
  }

  render () {
    const { count, onSubmit, users, chatGroup, department, subCompany, deleteNewMember, shareToChat, sendForm, setSendForm, showDetail } = this.props;
    const { loading } = this.state;

    return (
      <div className='footer'>
        {
          [...users, ...chatGroup, ...department, ...subCompany].length > 0 ?
          <div className={classNames('show-add-memeber', {'hide-add-memeber' : showDetail })}>
            <ul>
              {
                users.map(am => (
                  <li key={`${USER}_${am.id}`} onClick={() => {deleteNewMember(am, USER)}}>
                    {<Avatar userId={am.id} />}
                  </li>
                ))
              }
              {
                chatGroup.map(cg => (
                  <li key={`${CHATGROUP}_${cg.id}`} onClick={() => {deleteNewMember(cg, CHATGROUP)}}>
                    {<Avatar name={cg.group_name || cg.name || cg.lastname} url={cg.imgUrl || cg.icon} isGroup={true} type="0" />}
                  </li>
                ))
              }
              {
                department.map(cg => (
                  <li key={`${DEPARTMENT}_${cg.id}`} onClick={() => {deleteNewMember(cg, DEPARTMENT)}}>
                    {<Avatar name={cg.name} isGroup={true} type="1" />}
                  </li>
                ))
              }
              {
                subCompany.map(cg => (
                  <li key={`${SUBCOMPANY}_${cg.id}`} onClick={() => {deleteNewMember(cg, SUBCOMPANY)}}>
                    {<Avatar name={cg.name} isGroup={true} type="1" />}
                  </li>
                ))
              }
            </ul>
          </div> : null
        }
        <div className='footer-opt'>
          <If condition={shareToChat}>
            <Then>
              <Button className={`submit share-btn share-btn-only`} loading={loading} disabled={count===0 || loading} onClick={this.onSubmit}>
                {loading ? getLabel(523373, '分享中...') : getLabel(523370, '分享表单')}{!loading && count > 0 ? '(' + count + ')' : ''}
              </Button>
            </Then>
            <Else>
              <div className='whether-send-form' onClick={setSendForm}>
                <CheckboxItem checked={sendForm}>
                  {getLabel(523374, '同时发送表单给对方')}
                </CheckboxItem>
              </div>
              <Button disabled={count===0} className='submit share-btn' onClick={onSubmit}>
                {getLabel(83446, '确定')}{count > 0 ? '(' + count + ')' : ''}
              </Button>
            </Else>
          </If>
        </div>
      </div>
    );
  }
}